class DistortCarousel {
  constructor(option) {
    // 存放轮播图片的数组
    this.imgUrls = option.imgUrls;
    // 外层壳子
    this.stage = option.stage;
    // ul 里面有几个li 
    this.num = option.num;
    // li的宽度等于 盒子的宽度 去 除以 有多少个li
    this.barWidth = this.stage.width() / this.num;
    // 下一张切换按钮
    this.rightBtn = option.rightBtn;
    // 哪个图在前面
    this.faceImg = {
      'front': 0,
      'top': 1,
      'back': 0,
      'bottom': this.imgUrls.length - 1
    };
    // 哪个面在前面
    this.faceId = {
      'front': 2,
      'top': 0,
      'back': 3,
      'bottom': 1
    };
    // 旋转的角度
    this.degree = 0;
    // 节流阀
    this.disabled;
  }
  init () {
    var _this = this;
    // 创建ul 
    var $ul = $('<ul></ul>');
    //将外层盒子的高度设置给ul的高度
    var height = this.stage.height();
    // 根据num循环创建li
    for (let i = 0; i < this.num; i++) {
      let $li = $('<li></li>');
      $li.css({
        'width': this.barWidth,
        'transition': `0.8s ${0.3 * i / this.num}s`
      });
      // 创建四个div 
      $li.append($('<div></div><div></div><div></div><div></div>'));
      // 设置li里面div的样式
      $li.children().each(function (j) {
        // 共通的图片属性
        $(this).css({
          'background-position-x': `${-i * _this.barWidth}px`,
          'background-size': `${_this.stage.width()}px ${_this.stage.height()}px`
        });
        // 各自的旋转和平移属性
        // 上面
        if (j === 0) {
          $(this).css({
            'top': -height + 'px',
            'transform-origin': 'bottom',
            'transform': `translateZ(${height / 2}px) rotateX(90deg)`
          })
        }
        // 下面
        if (j === 1) {
          $(this).css({
            'top': height + 'px',
            'transform-origin': 'top',
            'transform': `translateZ(${height / 2}px) rotateX(-90deg)`
          })
        }
        // 前面
        if (j === 2) {
          $(this).css({
            'transform': `translateZ(${height / 2}px)`
          })
        }
        // 后面
        if (j === 3) {
          $(this).css({
            'transform': `translateZ(${-height / 2}px) rotateX(180deg)`
          })
        }
      });
      $ul.append($li);
    }
    this.stage.append($ul);
    this.setImage();
    this.rightBtn.click(() => {
      this.clickRightBtn();
    });
  }

  setImage () {
    var _this = this
    this.stage.children('ul').children('li').each(function (i) {
      // 不管你是正方形还是六边形，都适用
      for (var key in _this.faceId) {
        $(this).children().eq(_this.faceId[key]).css({
          'background-image': `url(${_this.imgUrls[_this.faceImg[key]]})`
        })
      }
    })
  }

  rotate (direction) {
    // 逆时针旋转
    if (direction === 'next') {
      let frontId = this.faceId.front;
      this.faceId.front = this.faceId.top;
      this.faceId.top = this.faceId.back;
      this.faceId.back = this.faceId.bottom;
      this.faceId.bottom = frontId;
      let frontImage = this.faceImg.front;
      this.faceImg.front = this.faceImg.top;
      this.faceImg.top = (this.faceImg.top + 1) % this.imgUrls.length;
      this.faceImg.bottom = frontImage;
    }
  }

  clickRightBtn () {
    var _this = this;
    if (this.disabled) return;
    this.disabled = true;
    this.degree -= 90;
    this.stage.children('ul').children('li').each(function () {
      $(this).css({
        transform: `rotateX(${_this.degree}deg)`
      });
    });
    setTimeout(() => {
      this.rotate('next')
      this.setImage()
      this.disabled = false
    }, 1500)
  }
}
